<template>
	<div class="ztBox">
		<div class="sCbox">
			<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
				:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
				:on-exceed="handleExceed" :file-list="fileList" accept=".pdf, .doc,.docx">
				<el-button size="small" icon="el-icon-upload" type="primary">上传文档</el-button>
				<div slot="tip" class="el-upload__tip">支持.doc、.docx和.pdf格式文件</div>
			</el-upload>
		</div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>我的文档</span>
				<el-input v-model="input" style="width: 25%;" placeholder="请输入搜索内容"></el-input>
				<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
			</div>
			<div v-for="o in 4" :key="o" class="text item">
				<div class="topBox">
					<div class="documentBox">
						<i class="el-icon-document"  style="font-size: 20px;color:#00aaff"></i>

					</div>
					<el-dropdown trigger="hover">
						<span class="el-dropdown-link">
							<i style="transform: rotateZ(90deg);font-size: 20px;"
								class="el-icon-more el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item class="clearfix">
								删除
								<el-badge class="mark" />
							</el-dropdown-item>
							<el-dropdown-item class="clearfix">
								润色中文论文
								<el-badge class="mark" />
							</el-dropdown-item>
							<el-dropdown-item class="clearfix">
								润色英文论文
								<el-badge class="mark" />
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<p>论文题目</p>
				<p class='lwNr'>
					论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容论文内容
				</p>
				<p style="text-align: right;margin:0;font-size: 14px;font-style:italic;color:#656565;">昨天</p>

			</div>
		</el-card>

	</div>
</template>

<script>
	export default {
		name: 'AIRewriting', // 请将ComponentName替换为实际的组件名，例如DataAnalysis  
		data() {
			return {
				input: '',
			};
		}
	};
</script>
<style scoped>
	.topBox {
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
	}

	.documentBox {
		width: 30px;
		height: 30px;
		padding: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15px;
		border: 1px solid #cbcbcb;
	}

	.sCbox {
		height: 5rem;
		border-radius: 1rem;
		background-color: #e0e4f5;
		padding: 20px;
		display: grid;
		grid-template-columns: max-content auto;
		grid-template-rows: 1fr auto 1fr;
		width: 96%;
		gap: .28571rem;
		margin: 0 auto;


	}

	>>>.el-upload .el-button--small {
		color: #393737;
		background-color: #f0f4f9;
		border-color: #c0cbd7;
		padding: 19px 27px;
		font-size: 17px;
		border-radius: 15px;
	}

	.ztBox {
		margin-top: 30px;
		padding: 0 25%;
	}

	.box-card {
		margin-top: 50px;
	}

	.clearfix {
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
	}

	.item {
		width: 280px;
		height: 250px;
		border-radius: 15px;
		background-color: #fff;
		border: 1px solid #cbcbcb;
		margin-bottom: 10px;
		padding: 5px;
	}

	>>>.el-card__body {
		display: flex;
		flex-flow: wrap;
		justify-content: space-between;
	}

	.item:hover {
		background-color: #409eff1a;
	}

	.lwNr {
		display: -webkit-inline-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 14px;
		color: rgb(189, 189, 189);
		height: 100px;
		line-height: 32px;
		overflow: hidden;
	}
</style>